<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>{{ bidInfo.title }}</h2>
    </div>

    <!-- 基本信息区域 -->
    <el-card class="box-card">
      <div class="detail-info">
        <div class="info-item">
          <span class="label">招标单位：</span>
          <span class="content">{{ bidInfo.iUnit }}</span>
        </div>
        <div class="info-item">
          <span class="label">招标编号：</span>
          <span class="content">{{ bidInfo.iNumber }}</span>
        </div>
        <div class="info-item">
          <span class="label">公告截止时间：</span>
          <span class="content">{{ bidInfo.getEndTime }}</span>
        </div>
      </div>
    </el-card>

    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" @tab-click="handleClick" class="detail-tabs">
      <el-tab-pane label="招标公告" name="notice">
        <div class="tab-content">
          <h3>一、项目概况与采购范围</h3>
          <div class="content-block">
            <p>1、项目名称：{{ bidInfo.iName }}</p>
            <p>2、项目编号：{{ bidInfo.iNumber }}</p>
            <p>3、采购方式：{{ bidInfo.iWay == 1 ? '公开' : '邀请' }}</p>
            <p>4、供货地点：{{ bidInfo.address }}</p>
          </div>

          <h3>二、公告内容</h3>
          <div class="content-block">
            <div v-html="sanitizedContent"></div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中标候选人公示" name="candidates">
        <h2 v-show="startTime == ''">未到时间</h2>
        <div class="notice-content" v-show="startTime != ''">
          <p class="notice-paragraph">
            根据招标文件的评标办法和标准，经评标委员会评审推荐，现将中标候选人公示如下：
          </p>
          <h3 class="section-title">一、项目概况</h3>
          <p class="notice-paragraph">
            招标编号：{{ bidInfo.iNumber }}<br>
            <span style="margin-left: 2%;">招标单位：{{ bidInfo.iUnit }}</span> 
          </p>

          <h3 class="section-title" style="color: #07a7c0;">二、中标候选人排序及得分</h3>
          <p class="notice-paragraph" v-for="candidate in candidateInfo" :key="candidate.hId">
            <strong style="color: #07a7c0;">第{{ candidate.ranking }}中标候选人：</strong><br>
            供应商名称：{{ candidate.hName }}<br>
            最终得分：{{ candidate.finalScore }}分<br>
          </p>

          <h3 class="section-title">三、公示时间</h3>
          <p class="notice-paragraph">
            公示发布时间：{{ startTime }}<br>
          </p>   
          <p class="notice-paragraph">
            公示期限：自本公示发布之日起{{ ((new Date(endTime) - new Date(startTime)) / (1000 * 60 * 60 * 24)).toFixed(1) }}个工作日
          </p>

          <h3 class="section-title">四、异议与投诉</h3>
          <p class="notice-paragraph">
            投标人或者其他利害关系人对评标结果有异议的，应当在中标候选人公示期间提出。异议或投诉必须以书面形式提出，并提供必要的证明材料。
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中标结果公示" name="results">
        <h2 v-show="pStartTime == ''">未到时间</h2>
        <!-- 中标结果内容 -->
        <div class="result-notice" v-show="pStartTime != ''">
          <h2 class="notice-title">中标结果公示</h2>

          <div class="notice-content" v-show="pStartTime != null">
            <p class="notice-paragraph">
              根据招标文件规定，经评标委员会评审确定，现将中标结果公示如下：
            </p>

            <h3 class="section-title">一、招标项目概况</h3>
            <p class="notice-paragraph">
              招标项目编号：{{ bidInfo.iNumber }}
            </p>
            <p class="notice-paragraph" v-for="itemEle in resultsInfo">
              供应商名称：{{ itemEle.hName }}
            </p>

            <h3 class="section-title">二、中标信息</h3>
            <p class="notice-paragraph">
              公示发布时间：{{ pStartTime }}
            </p>
            <p class="notice-paragraph">
              公示结束时间：{{ pEndTime }}
            </p>
            <h3 class="section-title">三、公示内容</h3>
            <p v-for="itemEle in resultsInfo" :key="itemEle.id" style="margin-left: 2%;">
              <span style="color: #0078d7;">未中标供应商:</span>{{ itemEle.hName }}<br />
              <span style="color: #0078d7;">评分:</span>{{ itemEle.finalScore }}<br />
              <span style="color: #0078d7;">排名:</span>{{ itemEle.ranking }}<br />
            </p>
            <p v-for="itemEle in bidResultInfo" :key="itemEle.id" style="margin-left: 2%;">
              <span style="color: red;">中标供应商:</span>{{ itemEle.hName }}<br />
              <span style="color: red;">评分:</span>{{ itemEle.finalScore }}<br />
              <span style="color: red;">排名:</span>{{ itemEle.ranking }}<br />
            </p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button style="float: right;margin-bottom: 20px;" @click="goBack" type="success">返回</el-button>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';
import { getTenderNoticeInfo, getBidWinningCandidate, getWinnResult } from '../api/system/purchase'
export default {
  name: 'WhResultsDetail',
  data() {
    return {
      title: '年度采购计划',
      pStartTime: '',
      pEndTime: '',
      startTime: '',
      endTime: '',
      activeTab: 'notice',
      candidateInfo: [],//中标候选人公示
      resultsInfo: [],//中标结果公示(未中标的)
      bidResultInfo: [],//中标的
      bidInfo: {
        iNumber: '',
        company: '实力信息科技有限公司',
        bidNo: 'ZB20241295537019',
        endTime: '2024-01-01 09:00:00',
        projectName: '某水泥厂年度材料采购项目',
        projectNo: 'HHZB-2024(XB)-SG-004',
        purchaseMethod: '询比采购',
        deliveryLocation: '济南市',
        projectOverview: '本次招标范围内设施修及维修等工程'
      }
    }
  },
  methods: {
    goBack() {
      window.history.back();
    },
    getWinnResult() {
      this.bidResultInfo=[];
      this.resultsInfo=[];
      getWinnResult(this.bidInfo.iNumber).then(res => {        
        res.data.forEach(ele => {
          if (ele.bidder == 0) {
            this.bidResultInfo.push(ele);
          } else {
            this.resultsInfo.push(ele);
          }
        })        
      })
    },
    handleClick(active, old) {
      this.activeTab = active.name
      if (this.activeTab === "candidates") {
        this.getBidWinningCandidate();
      }
      if (this.activeTab === "results") {
        this.getWinnResult();
      }
    },
    getBidWinningCandidate() {
      getBidWinningCandidate(this.bidInfo.iNumber).then(res => {        
        if (res.data.csTender.startTime != null) {
          this.startTime = res.data.csTender.startTime
          this.endTime = res.data.csTender.endTime
        }

        if (res.data.csTender.pStartTime != null) {
          this.pStartTime = res.data.csTender.pStartTime
          this.pEndTime = res.data.csTender.pEndTime
        }
        this.candidateInfo = res.data.candidate
      })
    },
    getTenderNoticeInfo() {
      getTenderNoticeInfo(this.bidInfo.iNumber).then(res => {
        this.bidInfo = res.data
      })
    }
  },
  computed: {
    sanitizedContent() {
      // 使用 DOMPurify 清洗 HTML
      return DOMPurify.sanitize(this.bidInfo.remark);
    },

  },
  mounted() {
    this.$store.dispatch("app/toggleSideBarHide", true);
    document.querySelector('.navbar').style.display = 'none';
    document.querySelector('.tags-view-container').style.display = 'none';
    this.bidInfo.iNumber = this.$route.params.iNumber
    this.getBidWinningCandidate();

    this.getTenderNoticeInfo();
  },
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
}

.detail-info {
  padding: 20px;
}

.info-item {
  margin-bottom: 15px;
  line-height: 24px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #606266;
}

.detail-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px;
}

.content-block {
  margin: 15px 0;
  line-height: 1.8;
}

.requirement-item {
  margin-bottom: 10px;
}

h3 {
  margin: 20px 0 10px;
  font-weight: bold;
  color: #303133;
}

/* 在src/assets/styles/candidate-notice.css中 */
.candidate-notice {
  padding: 20px;
  line-height: 1.8;
  color: #333;
}

.notice-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}

.notice-content {
  padding: 0 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 25px 0 15px;
  color: #303133;
}

.notice-paragraph {
  margin-bottom: 15px;
  text-indent: 2em;
  line-height: 2;
}

.notice-paragraph strong {
  font-weight: bold;
  color: #303133;
}

/* 在src/assets/styles/candidate-notice.css中 */
.candidate-notice {
  padding: 20px;
  line-height: 1.8;
  color: #333;
}

.notice-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}

.notice-content {
  padding: 0 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 25px 0 15px;
  color: #303133;
}

.notice-paragraph {
  margin-bottom: 15px;
  text-indent: 2em;
  line-height: 2;
}

.notice-paragraph strong {
  font-weight: bold;
  color: #303133;
}
</style>
